<div class="background flex flex_column flex_1">
    <!--列表-->
    <div class="list">
        <div class="title">
            <div class="title_text"> 能力监控</div>
            <div class="title_button">在线注册</div>
        </div>
        <div class="two_module">
            <div class="Module">
                <div class="module_title">
                    设备统计
                </div>
                <div class="module_data">
                    <div class="online">
                        <div class="online_num">23</div>
                        <div class="online_text">在线设备</div>
                    </div>
                    <div class="notonline">
                        <div class="notonline_num">12</div>
                        <div class="notonline_text">离线设备</div>
                    </div>
                    <div class="rate">
                        <div class="notonline_num">66</div>
                        <div class="notonline_text" style="display: inline-block;">在线率</div>
                        <div class="container">
                            <div class="jindutiao percent66"></div>
                        </div>
                    </div>
                </div>
            </div>
            <div class="Module" style="margin-left: 2%">
                <div class="module_title">
                    实例统计
                </div>
                <div class="module_data">
                    <div class="online w17percent">
                        <div class="online_num">23</div>
                        <div class="online_text">可用实例</div>
                    </div>
                    <div class="notonline w17percent">
                        <div class="notonline_num">12</div>
                        <div class="notonline_text">异常实例</div>
                    </div>
                    <div class="notonline w17percent">
                        <div class="notonline_num">12</div>
                        <div class="notonline_text">停用实例</div>
                    </div>
                    <div class="rate w49percent">
                        <div class="notonline_num">66</div>
                        <div class="notonline_text" style="display: inline-block;">运行率</div>
                        <div class="container">
                            <div class="jindutiao percent66"></div>
                        </div>
                    </div>
                </div>
            </div>

        </div>

        <div class="bg_white flex main">
            <!--上部搜索-->
            <nz-input-group [nzSuffix]="suffixIconSearch" class="searchinput">
                <input type="text" nz-input placeholder="Search" />
            </nz-input-group>
            <ng-template #suffixIconSearch>
                <i nz-icon nzType="search"></i>
            </ng-template>
            <div class="refresh_div">
                <img src="assets/images/icon_refresh.png" class="refresh_img" />
            </div>
        </div>

        <!--机器信息-->
        <div class=" flex four_module">
            <div class="four_module_item">
                <div class="four_module_head">
                    <div class="four_module_left">
                        <img src="assets/images/virtualmachine.png" alt="" class="module_img">
                    </div>
                    <div class="four_module_right">
                        <div class="four_module_title">
                            设备名称显示在这里</div>
                        <div class="four_module_state">
                            <span class="green_state"></span> 在线
                        </div>
                    </div>

                </div>
                <div class="four_module_body">
                    <div>
                        <div class="four_module_name">
                            设备IP
                        </div>
                        <div class="four_module_data">
                            192.168.1.1
                        </div>
                    </div>
                    <div class="mgt10">
                        <div class="four_module_name" style="background-color: white;">
                            设备ID
                        </div>
                        <div class="four_module_data">
                            1524678361564basdf
                        </div>
                    </div>
                    <div class="mgt10">
                        <div class="four_module_name" style="background-color: white;">
                            设备类型
                        </div>
                        <div class="four_module_data">
                            Atals 800
                        </div>
                    </div>
                    <div class="mgt10">
                        <div class="four_module_name" style="background-color: white;">
                            固件名称
                        </div>
                        <div class="four_module_data">
                            Hilens_Device
                        </div>
                    </div>
                    <div class="mgt10">
                        <div class="four_module_name" style="background-color: white;">
                            固件版本
                        </div>
                        <div class="four_module_data">
                            1.2.0
                        </div>
                    </div>
                    <div class="mgt10">
                        <div class="four_module_name" style="background-color: white;">
                            CPU
                        </div>
                        <div class="four_module_progress">
                            <div class="progress"></div>
                        </div>
                        <div class="four_module_percent">78%</div>
                    </div>
                    <div class="mgt10">
                        <div class="four_module_name" style="background-color: white;">
                            内存
                        </div>
                        <div class="four_module_progress">
                            <div class="progress"></div>
                        </div>
                        <div class="four_module_percent">78%</div>
                    </div>
                    <div class="mgt10">
                        <div class="four_module_name" style="background-color: white;">
                            磁盘
                        </div>
                        <div class="four_module_progress">
                            <div class="progress"></div>
                        </div>
                        <div class="four_module_percent">78%</div>
                    </div>
                    <div class="function">
                        <a class="function_font">详情</a>
                        <a class="function_font" style="margin-left: 8%;">重启</a>
                        <a class="function_font" style="margin-left: 8%;" (click)="showUpdateModal()">固件升级</a>
                        <a class="function_font" style="margin-left: 8%;">删除</a>
                    </div>
                </div>
            </div>
            <div class="four_module_item" style="margin-left: 2%;">
                <div class="four_module_head">
                    <div class="four_module_left">
                        <img src="assets/images/virtualmachine.png" alt="" class="module_img">
                    </div>
                    <div class="four_module_right">
                        <div class="four_module_title">
                            设备名称显示在这里</div>
                        <div class="four_module_state">
                            <span class="green_state"></span> 在线
                        </div>
                    </div>

                </div>
                <div class="four_module_body">
                    <div>
                        <div class="four_module_name">
                            设备IP
                        </div>
                        <div class="four_module_data">
                            192.168.1.1
                        </div>
                    </div>
                    <div class="mgt10">
                        <div class="four_module_name" style="background-color: white;">
                            设备ID
                        </div>
                        <div class="four_module_data">
                            1524678361564basdf
                        </div>
                    </div>
                    <div class="mgt10">
                        <div class="four_module_name" style="background-color: white;">
                            设备类型
                        </div>
                        <div class="four_module_data">
                            Atals 800
                        </div>
                    </div>
                    <div class="mgt10">
                        <div class="four_module_name" style="background-color: white;">
                            固件名称
                        </div>
                        <div class="four_module_data">
                            Hilens_Device
                        </div>
                    </div>
                    <div class="mgt10">
                        <div class="four_module_name" style="background-color: white;">
                            固件版本
                        </div>
                        <div class="four_module_data">
                            1.2.0
                        </div>
                    </div>
                    <div class="mgt10">
                        <div class="four_module_name" style="background-color: white;">
                            CPU
                        </div>
                        <div class="four_module_progress">
                            <div class="progress"></div>
                        </div>
                        <div class="four_module_percent">78%</div>
                    </div>
                    <div class="mgt10">
                        <div class="four_module_name" style="background-color: white;">
                            内存
                        </div>
                        <div class="four_module_progress">
                            <div class="progress"></div>
                        </div>
                        <div class="four_module_percent">78%</div>
                    </div>
                    <div class="mgt10">
                        <div class="four_module_name" style="background-color: white;">
                            磁盘
                        </div>
                        <div class="four_module_progress">
                            <div class="progress"></div>
                        </div>
                        <div class="four_module_percent">78%</div>
                    </div>
                    <div class="function">
                        <a class="function_font">详情</a>
                        <a class="function_font" style="margin-left: 8%;">重启</a>
                        <a class="function_font" style="margin-left: 8%;" (click)="showUpdateModal()">固件升级</a>
                        <a class="function_font" style="margin-left: 8%;">删除</a>
                    </div>
                </div>
            </div>
            <div class="four_module_item" style="margin-left: 2%;">
                <div class="four_module_head">
                    <div class="four_module_left">
                        <img src="assets/images/virtualmachine.png" alt="" class="module_img">
                    </div>
                    <div class="four_module_right">
                        <div class="four_module_title">
                            设备名称显示在这里</div>
                        <div class="four_module_state">
                            <span class="green_state"></span> 在线
                        </div>
                    </div>

                </div>
                <div class="four_module_body">
                    <div>
                        <div class="four_module_name">
                            设备IP
                        </div>
                        <div class="four_module_data">
                            192.168.1.1
                        </div>
                    </div>
                    <div class="mgt10">
                        <div class="four_module_name" style="background-color: white;">
                            设备ID
                        </div>
                        <div class="four_module_data">
                            1524678361564basdf
                        </div>
                    </div>
                    <div class="mgt10">
                        <div class="four_module_name" style="background-color: white;">
                            设备类型
                        </div>
                        <div class="four_module_data">
                            Atals 800
                        </div>
                    </div>
                    <div class="mgt10">
                        <div class="four_module_name" style="background-color: white;">
                            固件名称
                        </div>
                        <div class="four_module_data">
                            Hilens_Device
                        </div>
                    </div>
                    <div class="mgt10">
                        <div class="four_module_name" style="background-color: white;">
                            固件版本
                        </div>
                        <div class="four_module_data">
                            1.2.0
                        </div>
                    </div>
                    <div class="mgt10">
                        <div class="four_module_name" style="background-color: white;">
                            CPU
                        </div>
                        <div class="four_module_progress">
                            <div class="progress"></div>
                        </div>
                        <div class="four_module_percent">78%</div>
                    </div>
                    <div class="mgt10">
                        <div class="four_module_name" style="background-color: white;">
                            内存
                        </div>
                        <div class="four_module_progress">
                            <div class="progress"></div>
                        </div>
                        <div class="four_module_percent">78%</div>
                    </div>
                    <div class="mgt10">
                        <div class="four_module_name" style="background-color: white;">
                            磁盘
                        </div>
                        <div class="four_module_progress">
                            <div class="progress"></div>
                        </div>
                        <div class="four_module_percent">78%</div>
                    </div>
                    <div class="function">
                        <a class="function_font">详情</a>
                        <a class="function_font" style="margin-left: 8%;">重启</a>
                        <a class="function_font" style="margin-left: 8%;" (click)="showUpdateModal()">固件升级</a>
                        <a class="function_font" style="margin-left: 8%;">删除</a>
                    </div>
                </div>
            </div>
            <div class="four_module_item" style="margin-left: 2%;">
                <div class="four_module_head">
                    <div class="four_module_left">
                        <img src="assets/images/virtualmachine.png" alt="" class="module_img">
                    </div>
                    <div class="four_module_right">
                        <div class="four_module_title">
                            设备名称显示在这里</div>
                        <div class="four_module_state">
                            <span class="green_state"></span> 在线
                        </div>
                    </div>

                </div>
                <div class="four_module_body">
                    <div>
                        <div class="four_module_name">
                            设备IP
                        </div>
                        <div class="four_module_data">
                            192.168.1.1
                        </div>
                    </div>
                    <div class="mgt10">
                        <div class="four_module_name" style="background-color: white;">
                            设备ID
                        </div>
                        <div class="four_module_data">
                            1524678361564basdf
                        </div>
                    </div>
                    <div class="mgt10">
                        <div class="four_module_name" style="background-color: white;">
                            设备类型
                        </div>
                        <div class="four_module_data">
                            Atals 800
                        </div>
                    </div>
                    <div class="mgt10">
                        <div class="four_module_name" style="background-color: white;">
                            固件名称
                        </div>
                        <div class="four_module_data">
                            Hilens_Device
                        </div>
                    </div>
                    <div class="mgt10">
                        <div class="four_module_name" style="background-color: white;">
                            固件版本
                        </div>
                        <div class="four_module_data">
                            1.2.0
                        </div>
                    </div>
                    <div class="mgt10">
                        <div class="four_module_name" style="background-color: white;">
                            CPU
                        </div>
                        <div class="four_module_progress">
                            <div class="progress"></div>
                        </div>
                        <div class="four_module_percent">78%</div>
                    </div>
                    <div class="mgt10">
                        <div class="four_module_name" style="background-color: white;">
                            内存
                        </div>
                        <div class="four_module_progress">
                            <div class="progress"></div>
                        </div>
                        <div class="four_module_percent">78%</div>
                    </div>
                    <div class="mgt10">
                        <div class="four_module_name" style="background-color: white;">
                            磁盘
                        </div>
                        <div class="four_module_progress">
                            <div class="progress"></div>
                        </div>
                        <div class="four_module_percent">78%</div>
                    </div>
                    <div class="function">
                        <a class="function_font">详情</a>
                        <a class="function_font" style="margin-left: 8%;">重启</a>
                        <a class="function_font" style="margin-left: 8%;" (click)="showUpdateModal()">固件升级</a>
                        <a class="function_font" style="margin-left: 8%;">删除</a>
                    </div>
                </div>
            </div>

        </div>
    </div>

</div>
<!-- 在线注册弹出框 -->
<nz-modal [(nzVisible)]="registerIsVisable" nzCentered [nzFooter]=null [nzWidth]="600">
    <ng-container *nzModalContent>
        <div class="reg_modal">
            <div class="reg_title">在线注册</div>
            <div class="reg_notes">
                <div class="reg_notes_i_div">
                    <div class="reg_i_div">
                        <img src="assets/images/control_i.svg" alt="" class="reg_i_img">
                    </div>
                </div>
                <div class="reg_notes_text">从激活列表中选择设备进行注册。注册操作需连接网络， 在华为云HiLens Console安装并运行AI应用后，可离线运行并管理。</div>
                <img src="assets/images/reg_cancel.svg" alt="" class="reg_notes_cancel">
            </div>
            <div class="reg_data">
                <div class="reg_data_text">
                    设备名称
                </div>
                <div class="reg_data_input">
                    <nz-select ngModel="lucy" [nzSize]="'middle'" style="width: 100%;">
                        <nz-option nzValue="jack" nzLabel="Jack"></nz-option>
                        <nz-option nzValue="lucy" nzLabel="Lucy"></nz-option>
                        <nz-option nzValue="disabled" nzLabel="Disabled" nzDisabled></nz-option>
                    </nz-select>
                </div>
            </div>
            <div class="reg_data">
                <div class="reg_data_text">
                    云端数据储存地址
                </div>
                <div class="reg_data_input">
                    <input nz-input placeholder="请输入云端数据储存地址" [(ngModel)]="value" class="reg_input" />
                </div>
            </div>
            <div class="reg_data">
                <div class="reg_data_text">
                    申请PCA证书
                </div>
                <div class="reg_data_radio">
                    <nz-radio-group [(ngModel)]="radioValue">
                        <label nz-radio nzValue="A">是</label>
                        <label nz-radio nzValue="B">否</label>
                    </nz-radio-group>
                </div>
            </div>
            <div class="reg_button">
                <div class="reg_ok" (click)="clickOk()">确定</div>
                <div class="reg_cancel" (click)="clickCancel()">取消</div>
            </div>
        </div>

    </ng-container>
</nz-modal>
<!-- 固件升级弹出框 -->
<nz-modal [(nzVisible)]="updateIsVisable" nzCentered [nzFooter]=null [nzWidth]="600">
    <ng-container *nzModalContent>
        <div class="update_modal">
            <div class="update_title">固件升级</div>
            <div class="update_data">
                <div class="update_data_text">
                    设备名称
                </div>
                <div class="update_data_input">
                    <nz-upload nzAction="https://www.mocky.io/v2/5cc8019d300000980a055e76" [nzHeaders]="{ authorization: 'authorization-text' }" style="flex: 1;">
                        <nz-input-group [nzSuffix]="suffixIconSearch">

                            <input type="text" nz-input placeholder="请选择文件" class="update_long_input" />
                        </nz-input-group>
                        <ng-template #suffixIconSearch>
                            <img src="assets/images/folder.svg" alt="" class="update_input_img">
                        </ng-template>



                    </nz-upload>

                </div>
                <div class="upload_file">上传文件</div>
            </div>
            <div class="update_button">
                <div class="update_ok" (click)="updateOk()">确定</div>
                <div class="update_cancel" (click)="updateCancel()">取消</div>
            </div>
        </div>

    </ng-container>
</nz-modal>